<template>
  <s-layout :title="state.title" navbar="normal">
    <view>
      <view>
        <view v-for="item in list" class="item" @tap="goDetail(item)">
          <view class="title ss-line-1">{{ item.title }}</view>
          <view class="ss-flex">
            <view class="ss-w-25 ss-m-r-24">
              <image
                :src="item.picUrl"
                mode="aspectFill"
                style="width: 100px; height: 100px"
              ></image>
            </view>
            <view>
              <mp-html
                :content="item.content"
                containerStyle="height: 38px;width: 60vw; overflow: hidden;"
              ></mp-html>
              <view class="dian"> ...... </view>
              <view class="">{{ dayjs(item.createTime).format('YYYY-MM-DD') }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </s-layout>
</template>

<script setup>
  import ArticleApi from '@/sheep/api/promotion/article';
  import { onLoad, onPageScroll, onPullDownRefresh } from '@dcloudio/uni-app';
  import dayjs from 'dayjs';

  // 商品列表
  const list = ref([]);

  const state = ref({
    title: '',
  });
  const params = ref({
    pageSize: 10,
    pageNo: 1,
    status: 0,
    categoryId: undefined,
  });
  onLoad((options) => {
    console.log('options', options);
    if (options.categoryId) {
      params.value.categoryId = options.categoryId;
    }
    if (options.title) {
      state.value.title = options.title;
    }
    console.log();

    init();
  });
  const goDetail = (row) => {
    console.log('goDetail', row.id);
    uni.navigateTo({
      url: `/pages/public/richtext?id=${row.id}&title=${row.title}`,
    });
  };

  const init = async (v) => {
    const allArticles = await ArticleApi.getArticlePage(params.value);
    list.value = allArticles.data.list;
    console.log('allArticles.list', allArticles);
  };
</script>

<style scoped lang="scss">
  .title {
    font-size: 16px;
    padding: 0px 0 10px;
    font-weight: bold;
  }
  .dian {
    margin-top: -5px;
    margin-bottom: 15px;
  }
  .item {
    padding: 12px;
    margin: 8px;
    background-color: #fff;
  }
</style>
